<template>
	<view class="container">
		<view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view>
		
		<view v-if = "userRole == 'driver'" class="input-forms">
			<label class="txz-label2">货运车辆用户</label>
			<QSInput :name="bindFormName" 
				variableName="realName" 
				title="姓名"
				placeholder="请输入真实姓名"
				leftIcon="person-filled"
				titleHide required
				v-model="values.realName" 
				verifyType="Required"
				:itemDisabled="itemDisabled">
			</QSInput>
			<QSInput 
				:name="bindFormName"
				variableName="phone"
				title="手机号"
				placeholder="请输入手机号"
				leftIcon="phone-filled"
				titleHide 
				required 
				v-model="values.phone"
				verifyType="Tel"
				:itemDisabled="itemDisabled">
			</QSInput>
			<QSInput :name="bindFormName"
				 variableName="password" 
				 title="密码" 
				 placeholder="请输入密码"
				 leftIcon="locked" 
				 titleHide 
				 required 
				 verifyType="Required"
				 password 
				 v-model="values.password" 
				 :itemDisabled="itemDisabled">
			 </QSInput>
			<QSInput 
				:name="bindFormName" 
				variableName="password2" 
				title="密码" 
				placeholder="请再次输入密码" 
				leftIcon="locked" 
				titleHide 
				required
				verifyType="Required"
				password 
				v-model="values.password2" 
				:itemDisabled="itemDisabled"></QSInput>


			<button type="primary" style="margin-top: 50rpx;width: 50%;" @tap="bindRegister">注册绑定</button>
			<label  class = "buttom-label-btn" @click="changeRole()" >{{userRoleChangeText}}</label>
			<!-- <label class="txz-label2">uID={{getWxUserId}}</label> -->
		</view>
		
		<view v-else class="input-forms">
			<label class="txz-label2">用户登录</label>
			<QSInput 
				:name="loginFormName"
				variableName="username"
				title="账号"
				placeholder="请输入 账号/手机号"
				leftIcon="person-filled"
				titleHide
				required
				verifyType="Required"
				v-model="values.username"
				:itemDisabled="itemDisabled">
			</QSInput>
			<QSInput 
				:name="loginFormName"
				variableName="password"
				title="密码"
				placeholder="请输入密码"
				leftIcon="locked"
				titleHide
				required
				verifyType="Required"
				password
				v-model="values.password" 
				:itemDisabled="itemDisabled"></QSInput>
			<button type="primary" style="margin-top: 50rpx;width: 50%;" @tap="bindLogin">登录</button>
			<label class = "buttom-label-btn" @click="changeRole()" >{{userRoleChangeText}}</label>
		</view>
	</view>
	
</template>

<script>
	import QSApp from '@/components/QS-inputs-split/js/app.js';
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex';
	
	export default {
		computed: {
		    ...mapState(['hasLogin']),
			...mapGetters(['getUserInfo','getWxUserId'])
		},
		data() {
			return {
				title: 'Hello',
				bindFormName: 'bindInput',
				loginFormName: 'loginInput',
				values: {
					username: '',
					realName: '',
					password: '',
					password2: '',
					phone: '',
					filter: ''
				},
				itemDisabled: false,
				nCode: '',
				
				userRole: 'driver',
				userRoleChangeText: '账号登录',
				localUserInf: null,
			}
		},
		onShow() {
			let _this = this;
			
			let userInfo = _this.$api.globalData['userInfo']
			if(userInfo==undefined){
				userInfo = uni.getStorageSync('userInfo')
				_this.$api.globalData['userInfo'] = userInfo
				console.log("Storage userInfo:"+JSON.stringify(userInfo))
			}else{
				console.log("Mem userInfo:"+JSON.stringify(userInfo))
			}
			//let localUserInf = _this.getUserInfo;
			_this.localUserInf = userInfo;
		},
		onLoad(options) {
			let _this = this;
			console.log("register onLoad")
		},
		methods: {
			// 解析URL 参数
			getUrlParam(name) {
				let reg = new RegExp('(^|&)'+ name + '=([^&]*)(&|$)')
				let r = window.location.search.substr(1).match(reg)
				if(r!=null){
					return unescape(r[2])
				} 
				return null
			},
			bindRegister() {
				const _this = this;
				QSApp.getForm(_this.bindFormName).then(res => {
					console.log('获取输入:' + JSON.stringify(res));
					
					console.log('获取FORM数据成功: ' + JSON.stringify(res));
					//QSApp.showToast('获取数据成功', 'success');
					if(res.verifyErr.length>0){
						let errInput = res.verifyErr[0];
						QSApp.showToast(errInput.title + "输入不正确");
						return;
					}
					
					if(res.data.password != res.data.password2){
						QSApp.showToast('输入密码不一致');
						return;
					}
					
					let params = {
						realName: res.data.realName,
						phone: res.data.phone,
						password: res.data.password,
						wxUserId: _this.localUserInf.wxUserId ? _this.localUserInf.wxUserId :"" ,
					};
					let url = "/rest/bindRegister";
					uni.showLoading({
						title:"提交表单，请您耐心等待..."
					})
					_this.$api.request(url, params, failres => {
						uni.hideLoading();
						_this.logining = false
						uni.showToast({
							title: '绑定失败',
							icon: "none"
						});
					}).then(rsp => {
						uni.hideLoading();
						console.log(rsp);
						_this.logining = false
						_this.$store.commit('login', rsp.data)
						_this.$api.globalData['userInfo'] = rsp.data;
						//uni.setStorageSync('userInfo', res.data)
						// if (_this.$api.prePage().lodaData) {
						// 	_this.$api.prePage().loadData()
						// }
						_this.reSet();
						uni.navigateBack()
					})
					
					
				}).catch(err => {
					console.log('获取FORM数据失败: ' + JSON.stringify(err));
					QSApp.showToast('获取数据异常');
				});
			},
			bindLogin() {
				const _this = this;
				
				QSApp.getForm(this.loginFormName).then(res => {
					
					console.log('获取输入:' + JSON.stringify(res));
					if(res.verifyErr.length>0){
						let errInput = res.verifyErr[0];
						QSApp.showToast(errInput.title + "输入不正确");
						return;
					}
					
					//QSApp.showToast('获取数据成功', 'success');
					
					let params = {
						username: res.data.username,
						password: res.data.password,
						wxUserId: _this.localUserInf.wxUserId ? _this.localUserInf.wxUserId :"" ,
					};
					console.log('绑定注册参数: ' + JSON.stringify(params));
					
					
					let url = "/rest/bindLogin";
					uni.showLoading({
						title:"提交表单，请您耐心等待..."
					})
					_this.$api.request(url, params, failres => {
						uni.hideLoading();
						_this.logining = false
						uni.showToast({
							title: "登录失败",
							icon: "none"
						});
					}).then(rsp => {
						uni.hideLoading();
						console.log(rsp);
						_this.logining = false
						_this.$store.commit('login', rsp.data)
						uni.setStorageSync('userInfo', rsp.data)
						_this.$api.globalData['userInfo'] = rsp.data;
						// if (_this.$api.prePage().lodaData) {
						// 	_this.$api.prePage().loadData()
						// }
						_this.reSet();
						uni.navigateBack()
					})
					
					
				}).catch(err => {
					console.log('获取FORM数据失败: ' + JSON.stringify(err));
					QSApp.showToast('请检查输入参数');
				});
			},
			
			reSet() {
				this.values = {
					realName: '',
					password: '',
					passworld: '',
					passworld2: '',
					phoneNum: '',
					filter: ''
				}
			},
			setItemDisabled(){
				this.itemDisabled = !this.itemDisabled;
			},
			changeRole() {
				let _this = this;

				if(_this.userRole == 'driver'){
					_this.userRole = 'ploice';
					_this.userRoleChangeText = '注册绑定';
				}else{
					_this.userRole = 'driver';
					_this.userRoleChangeText = '账号登录';
				}
			},
			navBack() {
				uni.navigateBack();
			},
		}
	}
</script>

<style>
.container {
		position: relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background: #fff;
}
.back-btn {
	position: absolute;
	left: 40upx;
	z-index: 9999;
	padding-top: var(--status-bar-height);
	top: 40upx;
	font-size: 40upx;
	color: $font-color-dark;
}
.input-forms{
	margin-top: 30%;
	text-align: center;
}

.buttom-label-btn{
	margin-top: 60upx;
	color: #969696;
	font-size: 16px;
}
</style>
